<template>
    <section class="main">
        <div id="app">
			<div class="box">
				<p class="box_title">1.选择要合并的字段(选中字段可以上下拖到排序)</p>
				 <el-checkbox-group v-model="checkList">
				<ul  ref='parant'>
					<li v-for="(item, index) in outputs" 
						draggable='true'
						 @dragstart='drag($event,item,index)'
						  @drop='drop($event)' 
						  @dragover='allowDrop($event,item,index)'>
						   <el-checkbox :label="item" class="li_checkBox" :ids="item.id">{{item.name}}</el-checkbox>
					</li>
				</ul>
				 </el-checkbox-group>
				<p style="text-align: right;">
					 <el-button type="warning" @click="resetData">重置</el-button>
				</p>
				
				<p class="box_title">2.选择字段间的连接符</p>
					<el-radio v-model="form.radio8" :label="item.name" border size="medium" v-for="item in contentSymble">{{item.name}}</el-radio>
   					
   					<p class="add_out_put" @click="addOutput" >自定义</p>
   					<p style="text-align: right;">
   						 <el-button type="success" @click="submit">确定</el-button>
   					</p>
			</div>
		</div>

			<el-dialog
			  title="提示"
			  :visible.sync="dialogVisible"
			  width="300px"
			   :append-to-body="true"
			  >
			  <el-input  placeholder="请输入连接符" v-model="form.contentSymble"></el-input>
			  <p style="margin-top: 10px;text-align: center;">
			  	<el-button type="primary" @click="addcontentSymble">确认</el-button>
			  </p>
			  
			</el-dialog>
    </section>
</template>

<script>
    export default {
    	props:{
    		outputs:Array	
    	},
        data() {
            return {
            		dialogVisible:false,
					moveDom: '',
					changeDom: '',
					startY: 0,
					endY: 0,
					spliceIndex:'',
					addIndex:'',
					addItem:{},
					checkList:[],
					checkListSort:'',
					form:{
						radio8:'',
						contentSymble:'',
					},
					contentSymble:[
						{
							id:1,
							name:'不需要'
						},
						{
							id:2,
							name:'空格'
						},
						{
							id:3,
							name:'&'
						}
					],
            }
        },
				methods: {
					drag:function(event,item,index){ //start
					            console.log(event)
										 this.spliceIndex = index;
										  this.addItem = item;
		                                   this.moveDom = event.currentTarget
		                                   this.startY = event.clientY
//										   event.target.style.backgroundColor = '#2576c5';
//										   event.target.style.color = '#fff';
		                },
		                drop:function(event){ //end
										console.log(event);
										
		                                  event.preventDefault();
//		  									event.target.style.backgroundColor = '#fff';
//										   event.target.style.color = '#606266';
										   
		                                  this.changeDom = event.currentTarget
		                                  this.endY = event.clientY
						    if (this.endY - this.startY >= 0) {
//							    console.log('xia')
							    this.$refs.parant.insertBefore(this.moveDom, this.changeDom.nextSibling)
						      } else {
//							    console.log('shang')
							    this.$refs.parant.insertBefore(this.moveDom, this.changeDom)
						    }
		                },
		                allowDrop:function(event,item,index){ //moving
//										 this.items.splice(this.spliceIndex,1);
//										 
//										 this.items.splice(index,0,this.addItem);
										
		                                   event.preventDefault()
		                                  this.endY = event.clientY
		                                  this.changeDom = event.currentTarget
		                                  if (this.endY - this.startY >= 0) {
//							console.log('xia')
							this.$refs.parant.insertBefore(this.moveDom, this.changeDom.nextSibling)
						} else {
//							console.log('shang')
							this.$refs.parant.insertBefore(this.moveDom, this.changeDom)
						}
		            },
					resetData(){
						Object.assign(this.$data, this.$options.data())/*重置data数据*/
					},
					addOutput(){/*自定义*/
						this.dialogVisible = true;
					},
					addcontentSymble(){
							this.contentSymble.push(
								{
									id:this.contentSymble.length+2,
									name:this.form.contentSymble
								}
							)
							this.form.contentSymble = '';
							this.dialogVisible = false;
					},
					submit(){/*提交组合字段*/
						/*排序*/
						let isChecked = document.getElementsByClassName('is-checked li_checkBox');
						let checkListSort = [];
						for (let i = 0; i < isChecked.length; i++) {
							console.log(isChecked[i].getAttribute('ids'))
							checkListSort.push(isChecked[i].getAttribute('ids'))
						}
						this.checkListSort = checkListSort.join(',');
						/*排序*/
						this.$emit('submitZuheForm',{fieldJoinStr:this.form.radio8,checkListSort:this.checkListSort})
					},
					
				}

    }
</script>

<style scoped>

li {
    list-style: none;
    width: 120px;
    padding: 10px;
    border: solid 1px #EDEDED;
    margin-bottom: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 12px;
    cursor: move;
}
.box_title{
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 15px;
}
.add_out_put{
		font-size: 12px;
		color: #2576C5;
		padding-left: 11px;
		cursor: pointer;
		margin-top: 15px;
}
</style>